<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'
const chartDom = ref(null)
onMounted(()=>{
  // 初始化echarts
  const myEcharts = echarts.init(chartDom.value);
  // 图表参数配制
const option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C'], // 表格的列名
    show: false // 隐藏x轴
  },
  yAxis: {
    type: 'category',
    data: ['Row 1', 'Row 2', 'Row 3'], // 表格的行名
    show: false // 隐藏y轴
  },
  series: [{
    type: 'bar',
    itemStyle: {
      borderWidth: 1,
      borderColor: '#ccc'
    },
    data: [
      [0, 0, 100], // 表格内每个单元格的值
      [1, 0, 200],
      [2, 0, 150],
      [0, 1, 300],
      [1, 1, 250],
      [2, 1, 180],
      [0, 2, 400],
      [1, 2, 350],
      [2, 2, 280]
    ]
  }]
};
  // 设置参数
  myEcharts.setOption(option);
})
</script>

<template>
  <div ref="chartDom" class="box"></div>
</template>
<style lang="scss">
.box{
  width: 500px;
  height: 500px;

}
</style>